<script type="text/javascript">
    var nettyWs;
    var mylaytpl;
    var progressForm;
    var progressItemHtml;
    asyncFn.push(function () {
        layui.use(['laytpl'], function () {
            mylaytpl = layui.laytpl;
        });
        // 解绑原事件
        setTimeout(function () {
            var download = $("#download");
            download.unbind('click');
            //
            download.click(function () {
                if (!clickData) {
                    return;
                }
                // 初始化
                initWs(function () {
                    layer.close(openLayuiIndex);
                    triggerDownload(clickData.parentDir);
                });
            });
        }, 2000);
        // 创建form
        $("body").append($("#progressFormHtml").html());
        progressForm = $("#progressForm");
        progressItemHtml = $("#progressItemHtml").html();
    });

    /**
     *  初始化 websocket
     */
    function initWs(fn) {
        if (nettyWs) {
            fn && fn();
            return;
        }
        nettyWs = new WebSocket("ws://localhost:8888");
        nettyWs.onopen = function () {
            fn && fn();
        };
        nettyWs.onmessage = function (evt) {
            var jsonData = JSON.parse(evt.data);
            if (jsonData.code !== 200) {
                layer.msg(jsonData.msg);
                return;
            }
            var data = jsonData.data;
            if (data.event === "download") {
                // 下载
                window.open("http://localhost:8888?reqId=" + data.reqId);
                // 创建进度条
                mylaytpl(progressItemHtml).render({
                    name: data.name,
                    id: data.reqId
                }, function (html) {
                    progressForm.append(html);
                    element.render('progress');
                });
                return;
            }
            if (data.event === "progress") {
                var id = "p_" + data.reqId;
                element.progress(id, data.data + "%");
                if (data.data === "100") {
                    layer.msg("下载成功");
                    // 删除对应进度条
                    setTimeout(function () {
                        $("#p_div_" + data.reqId).remove();
                    }, 2000);
                }
            }
        };
        nettyWs.onclose = function (ev) {
            nettyWs = null;
        }
    }

    function triggerDownload(parentDir) {
        var data = {
            userId: "[[${user.getUserMd5Key()}]]",
            id: id,
            path: nowPath,
            name: parentDir,
            event: "download"
        };
        nettyWs.send(JSON.stringify(data));
    }

    window.onbeforeunload = function (e) {
        goodbye();
    };

    window.onunload = function () {
        goodbye();
    };

    function goodbye() {
        if (nettyWs) {
            nettyWs.close();
            nettyWs = null;
        }
    }
</script>

<script type="text/html" id="progressFormHtml">
    <form class="layui-form" action="" id="progressForm">

    </form>
</script>

<script type="text/html" id="progressItemHtml">
    <div class="layui-form-item" id="p_div_{{ d.id }}" title="{{ d.name }}">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-progress layui-progress-big" lay-filter="p_{{ d.id }}" lay-showPercent="true">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
            </div>
        </div>
    </div>
</script>